<template>
	<view class="main">
		<u-sticky>
			<view class="mainTop">
				<view class="search">
					<u-search :show-action="true" action-text="搜索" :animation="false" v-model="keyword" @search="search1()" @custom="search1()"></u-search>
				</view>
				
				<!-- 下拉 -->
				<ul class="ulTabs">
					<li @click="Settlement()">
						<view :class="[settlement==''?'viewColor':'viewColor1']">{{settlement==''?'结算方式':settlement}}</view>
						<u-icon name="arrow-down-fill" :color="settlement==''?'#909399':'#1684fd'"></u-icon>
					</li>
					<li @click="filters()">
						<view :class="[workType==''?'viewColor':'viewColor1'] ">{{workType==''?'行业':workType}}</view>
						<u-icon name="arrow-down-fill" :color="workType==''?'#909399':'#1684fd'"></u-icon>
					</li>
				</ul>
				
			</view>
		</u-sticky>
		
		<view style="margin-top: 150rpx;" v-if='lists.length==0'>
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		
		<view class="selection">
			<view class="workItem" v-for="(item,index) in lists" @click="goDetil(item.id)">
				<view class="header">
					<text class="name">{{item.work_name}}</text>
					<!-- <text class="money">{{item.wages}}/天</text> -->
					<text class="money" >{{item.wages}} {{item.settlement=='日结'?'元/天':''}} {{item.settlement=='月结'?'元/月':''}} {{item.settlement=='计件'?'元/件':''}}</text>
				</view>
				<view class="center">
					<!--  -->
					<view class="tags" >
						<u-tag :text="item.create_type" type="primary"  size="mini" style="margin-right: 10px" v-if='item.create_type=="企业"'/>
						<u-tag :text="item.create_type" type="warning"  size="mini" style="margin-right: 10px" v-if='item.create_type=="个人"'/>
						<u-tag :text="item.settlement" type="success" size="mini" style="margin-right: 10px"/>
						<u-tag :text="item.need_num+'人'" type="success"   size="mini" style="margin-right: 10px"/>
						<u-tag :text="item.work_exp== '' || item.work_exp==null ?'无':item.work_exp" type="success"   size="mini" style="margin-right: 10px"/>
					</view>
					<view class="time">
						{{item.add_time.substring(0,10)}}
					</view>
				</view>
				<view class="footer">
					<!-- <text class="address">{{item.city+item.area+item.address}}</text> -->
					<text class="address">{{item.address}}</text>
					<text class="add1">
						{{ item.juli<1000?item.juli+'米':item.juli/1000+'km' }}
					</text>
				</view>
			</view>
		</view>
		
		<!-- <u-picker v-model="show" mode="selector"  :range="selector" ></u-picker> -->
		<u-select v-model="show" :list="list" @confirm='yes()'></u-select>
		
		<u-popup @close='chageClose' v-model="showFl" :closeable="false" mode="bottom" border-radius="14">
			<view class="gzlxTk">
				<view class="title_content">
					<!-- <view></view> -->
					<view style="text-align: left;">
						<u-button style="margin-left:20rpx;" size="mini" type="default" @click='resetting()'>重置</u-button>
					</view>
					<view style="text-align: center;">工种类型</view>
					<view style="text-align: right;">
						<u-button style="margin-right:20rpx;" size="mini" type="primary" @click='ok()'>确定</u-button>
					</view>
					
				</view>
					<view class="item_gz" :class="{active:arr.indexOf(item.name)>-1}" @click="lxClick(item.name)"
						v-for="(item,index) in gzlxList">
						{{item.name}}
					</view>
					
				
				<view style="width: 100%;height: 100rpx"></view>
			</view>
		
		</u-popup>
		<view style="margin-top: 30rpx;">
			<u-loadmore style="margin-top: 30rpx;" :status="status" />
		</view>
	</view>
</template>

<script>
	import api from '@/api/routes.js'
	export default{
		data(){
			return{
				show:false,
				showFl:false,
				page: 1,
				limit: 5,
				status: "loadmore",
				lists: [],
				// 拿到的数据总条数
				total: 0,
				//判断是否发送请求的条件
				load: false,
				keyword: '',
				list:[
					{
						value:'日结',
						label:'日结'
					},
					{
						value:'月结',
						label:'月结'
					},
					{
						value:'计件',
						label:'计件'
					},
				],
				gzlxList: [],
				arr:[],
				workType:'',
				settlement:'',
				flIndex:''
			}
		},
		onLoad(e) {
			
			this.flIndex=e.index;
			this.workType=e.type;
			this.getList();
			console.log(this.workType,'this.workType');
			if(e.index=='家政服务'){
				uni.setNavigationBarTitle({
					title:'家政服务'
									
				})
			}else if(e.index=='临时工'){
				uni.setNavigationBarTitle({
					title:'临时工'
									
				})
			}else if(e.index=='安装维修'){
				uni.setNavigationBarTitle({
					title:'安装维修'
									
				})
			}else if(e.index=='同城服务'){
				uni.setNavigationBarTitle({
					title:'同城服务'
									
				})
			}else if(e.index=='陪诊服务'){
				uni.setNavigationBarTitle({
					title:'陪诊服务'
									
				})
			}else if(e.index=='农时帮工'){
				uni.setNavigationBarTitle({
					title:'农时帮工'
									
				})
			}else if(e.index=='其他'){
				uni.setNavigationBarTitle({
					title:'其他'
									
				})
			}
			this.classification(e.index)
			
			
			console.log(wx.getStorageSync('nowLgt'),'wx.getStorageSync1')
			console.log(wx.getStorageSync('nowLat'),'wx.getStorageSync')
		},
		onReachBottom() {
			if (this.status === "loadmore") {
				this.loadmore();
			}
		},
		methods:{
			search1(){
				this.load = false;
				this.page = 1
				this.limit = 5
				this.status = 'loadmore'
				this.lists = []
				this.getList()
				console.log(this.keyword,'this.keword')
			},
			goDetil(id){
				uni.navigateTo({
					url: '/package/pages/searchJob/other/detils?id='+id+'&type=招工',
				});
			},
			async classification(val){
					const res = await this.$myRequest({
						url: api.classificationGrid,
						method: "GET",
						data: {
							parentId:0,
							businessId:3
						},
					});
					let arr=res.data.list;
					if(res.data.code==0){
						for(let i=0;i<arr.length;i++){
							let item = arr[i];
							if(item.name==val){
								let data=item.children;
								this.gzlxList=data
							}
							console.log(val,'val！！');
						}
					}
					
				},
			Settlement(){
				this.show=true;
				console.log('结算方式');
			},
			filters(){
				console.log('筛选');
				if(this.workType!=''){
					this.arr = this.workType.split(',')
				}
				this.showFl = true
			},
			chageClose() {
				this.arr = []
			},
			lxClick(val) {
				if (this.arr.indexOf(val) > -1) {
					var index = this.arr.indexOf(val)
					this.arr.splice(index, 1);
				} else {
					this.arr.push(val)
				}
			
			},
			ok() {
				this.workType = this.arr.toString();
				this.showFl = false;
				this.search1();
				console.log(this.workType,'this.workType');
			},
			resetting(){
				this.arr = [];
				// this.showFl = false;
			},
			yes(e){
				this.settlement=e.value;
				let arr=e.map(s=>{
					return{
						value:s.value,
						label:s.label,
					}
				})
				this.settlement=arr[0].value;
				this.search1();
				console.log(this.settlement,'结算方式');
			},
			loadmore() {
				this.page++;
				this.getList();
			},
			async getList() {
				wx.showLoading()
				// 判断当前是否在请求，如果为true正在请求数据，就让他返回空，如果为false没在请求，就让它开始请求数据
				if (this.load) {
					return;
				}
				this.load = true;
				// 请求数据时，状态改为加载中状态
				this.status = "loading";
				const res = await this.$myRequest({
					url: api.lgInfoPageList,
					method: "POST",
					data: {
						page: this.page,
						limit: this.limit,
						"orderSort": 1, //排序方式:1-热门,2-附近
						"key": this.keyword, //搜索关键词,
						"wages": "", //薪资
						"settlement": this.settlement, // 结算方式
						"workType":this.workType,//工种类型
						"mbId": "", //用户ID, ~~~~传这个值时,代表查询我发布的 ,大多数都不传
						"infoType": "招工", //类型:招工  / 求职  (必传)
						"lgt":wx.getStorageSync('nowLgt'),
						"lat":wx.getStorageSync('nowLat'),
						
					},
				});
				
				console.log(res,"分类岗位")
				this.load = false;
				if (res.data.code == 0) {
					// this.lists = res.data.page.list
					this.total = res.data.page.totalCount;
					this.lists = [...this.lists, ...res.data.page.list];
					this.ismore();
					setTimeout(() => {
						wx.hideLoading()
					}, 2000)
				} else {
					wx.showToast({
						title: '查询失败',
						icon: 'none'
					})
				}
				console.log(res.data.page.list,1228800)
			},
			
			ismore() {
				if (this.total === this.lists.length) {
					this.status = "nomore";
				} else {
					this.status = "loadmore";
				}
			},
		}
	}
</script>

<style lang="scss" scoped>   
.main{
}
.mainTop{
	border-bottom: 10px solid #EFEFEF;
}
.search{
	line-height: 40px;
	padding: 0 10px;
	background: #ffffff;
	
}
.ulTabs{
	display: flex;
	margin: 0 10px;
	line-height: 30px;
	justify-content: space-between;
	background: #ffffff;
	
	li{
		width: 49%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
// .selection{
	
// }


.workItem {
			width: 94%;
			// margin-left: 3%;
			height: 240rpx;
			margin:2px 10px 10px 10px;
			border-radius: 6px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

			.header {
				height: 90rpx;

				.name {
					color: #333;
					font-size: 34rpx;
					font-weight: bold;
					font-family: Arial, Helvetica, sans-serif;
					 white-space: nowrap;  
					 overflow: hidden;       
					 text-overflow: ellipsis; 
					 width: 70%;
				}

				.money {
					color: #F75E54;
					font-size: 30rpx;
					font-weight: 500;
					font-family: Arial, Helvetica, sans-serif;
				}
			}

			.center {
				height: 75rpx;
				border-bottom: 1px solid #E4E7ED;

				.time {
					color: #000000;
					font-size: 28rpx;
					font-family: Arial, Helvetica, sans-serif;
				}

				.tags {
					display: flex;

					.tagItem {
						font-size: 24rpx;
						margin-right: 15rpx;
						padding: 4rpx 10rpx 4rpx 10rpx;
						border-radius: 2px;
						background: #DBF1E1;
						color: #19BE6B;
					}

				}
			}

			.footer {
				height: 75rpx;

				.address {
					// color: #3d3d3f;
					font-size: 30rpx;
					font-family: Arial, Helvetica, sans-serif;
					width: 80%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.add1 {
					color: #5B81B8;
					font-size: 26rpx;
					font-family: Arial, Helvetica, sans-serif;
				}
			}

			.header,
			.center,
			.footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 96%;
				margin-left: 2%;
			}
		}
	.gzlxTk {
			height: 700rpx;
			display: flex;
			flex-wrap: wrap;
			// padding-top: 80rpx;
			padding-bottom: 280rpx;

			.active {
				width: 30%;
				height: 80rpx;
				// border: 1px solid #67B2E9;
				background: #1684fd !important;
				margin-left: 2.5%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #ffffff !important;
				margin-bottom: 20rpx;
			}

			.item_gz {
				width: 30%;
				height: 80rpx;
				// border: 1px solid #67B2E9;
				background: #EBEEF5;
				margin-left: 2.5%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #606266;
				margin-bottom: 20rpx;
			}
		}
	.title_content {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		height: 100rpx;
		margin-bottom: 10px;
		width: 100%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	
		view {
			width: 33%;
			// border: 1px solid red;
		}
	}
	.viewColor{
		color: #333;
		height: 30px;
		overflow: hidden;
	}
	.viewColor1{
		color: #1684fd;
		height: 30px;
		overflow: hidden;
	}
</style>